<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  padding-bottom: 6.2rem;
  background-color: #f2f2f2;
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  padding: 4rem 1rem 0;
  .my_tuan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    z-index: 2;
    // background: -webkit-linear-gradient(top, #fd8701, #fd8701);
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }
  .van_field {
    box-sizing: border-box;
    margin-bottom: 10px;
    box-shadow:0px 3px 3px rgba(0, 0, 0, 0.2);
    height: 4rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    line-height: 4rem;
    padding-left: 10px;
    color: #323233;
    background-color: #fff;
    .van-radio--horizontal {
      margin-right: 7px;
    }
  }
  .conter {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
    .timer {
      padding: 1rem 1rem;
      color: #999999;
    }
    .middle {
      display: flex;
      .middle_left {
        width: 30%;
        margin: 0.5rem 1rem;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .middle_right {
        width: 70%;
        margin: 0.5rem 1rem;
        .upone {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
        }
        .up {
          margin-bottom: 2rem;
          color: #444444;
        }
        .pop {
          display: flex;
          justify-content: space-between;
        }
        span {
          margin-right: 10px;
          color: #aeaeae;
        }
      }
    }
  }
}
</style>
<template>
  <div class="activityShow">
    <div class="my_tuan" :style="{ backgroundColor: theme_color }">
      <van-icon class="icon" name="arrow-left" @click="iconClick" />
      <span>我的拼团</span>
    </div>
    <div
      class="van_field"
    >
        <span>类型</span>
        <van-radio-group v-model="status" direction="horizontal">
          <van-radio name="1" @click="joinClick">参团</van-radio>
          <van-radio name="2" @click="myClick">我的团</van-radio>
        </van-radio-group>
      
    </div>
    <div v-if="myShow">
      <div class="conter" v-for="item in bodyList" :key="item.order_id">
        <div class="timer">{{ item.starttime }} 至 {{ item.endtime }}</div>
        <div class="middle">
          <div class="middle_left">
            <van-image
              width="5rem"
              height="5rem"
              fit="contain"
              :src="item.cover"
            />
          </div>
          <div class="middle_right">
            <div class="up">{{ item.title }}</div>
            <div class="pop">
              <span>参与: {{ item.group_num }} 人</span>
              <span>状态: {{ item.status_name }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="down">
            <van-button class="but" size="mini" @click="palyclick">查看拼团</van-button>
        </div> -->
      </div>
    </div>

    <div v-if="joinShow">
      <div class="conter" v-for="item in joinList" :key="item.order_id">
        <div class="timer">{{ item.starttime }} 至 {{ item.endtime }}</div>
        <div class="middle">
          <div class="middle_left">
            <van-image
              width="5rem"
              height="5rem"
              fit="contain"
              :src="item.cover"
            />
          </div>
          <div class="middle_right">
            <div class="upone">
              <div class="dwon">{{ item.title }}</div>
              <van-button class="but" size="mini" @click="offeredClick(item)"
                >去参团</van-button
              >
            </div>

            <div class="pop">
              <span>参与: {{ item.group_num }} 人</span>
              <span>状态: {{ item.status_name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Nodata v-show="nodataShow"></Nodata>
  </div>
</template>

<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Field,
  RadioGroup,
  Radio,
  Image as VanImage,
} from "vant";
import Nodata from '@/components/Nodata'
// import QRCode from 'qrcode'
// import html2canvas from 'html2canvas'
// import func from 'vue-editor-bridge';
// import utils from '@/assets/js/utils.js'
export default {
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [VanImage.name]: VanImage,
    Nodata
  },
  data() {
    return {
      openid: "",
      bodyList: [],
      status: "2",
      activity_id: null,
      myShow: true,
      joinShow: false,
      joinList: [],
      theme_color: '',
      nodataShow: false
    };
  },
  created() {
    // this.openid = localStorage.getItem("COPENID")
    const Item = JSON.parse(localStorage.getItem("OrderItem"));
    this.openid = localStorage.getItem("COPENID")
    this.activity_id = this.$route.query.activity_id
    this.theme_color = this.$route.hash
    console.log(this.theme_color, 'this.theme_color');
    // this.activity_id = Item.activityItem.activitys_id;
    this.getGroubody();
  },
  // computed: {
  //   getOpenId() {
  //     this.openid = this.$store.state.openid
  //     return this.openid
  //   }
  // },
  mounted() {},
  methods: {
    getGroubody() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: 1000
      });
      let params = { openid: this.openid, activity_id: this.activity_id };
      this.$request.getPageGroup(params).then((res) => {
        this.bodyList = res.data.data;
        if(this.bodyList.length == 0) {
          this.nodataShow = true
        }
        console.log(this.bodyList);
      });
    },
    offeredClick(item) {
      console.log(item, 'openid');
      item.group_ids = 1
      this.$store.commit("setOfferedItem", item);
      this.$router.push(`/caseShow/groupBuying/applyForm?activity_id=${this.activity_id}`);
    },
    iconClick() {
      this.$router.go(-1);
    },
    myClick() {
      this.myShow = true;
      this.joinShow = false;
      this.nodataShow = false
      this.getGroubody();
    },
    joinClick() {
      this.myShow = false;
      this.joinShow = true;
      this.nodataShow = false
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: 1000
      });
      let params = { activity_id: this.activity_id };
      this.$request.getPageActivity(params).then((res) => {
        this.joinList = res.data.data;
        if(this.joinList.length == 0) {
          this.nodataShow = true
        }
        console.log(this.joinList, 22222222);
      });
    },
  },
};
</script>